<template>
  <div class="app-login">
    <div class="login-container">
      <div class="login">
        <div class="login-title">{{ title }}</div>
        <div class="login-panel">
          <img class="login-logo" src="~@/assets/img/logo.png" />
          <div class="login-form">
            <el-form ref="accountFormRef" :model="accountForm" :rules="accountRules">
              <el-form-item prop="username">
                <el-input
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-user"
                  v-model="accountForm.username"
                  @keyup.enter="handleLogin"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  v-model="accountForm.password"
                  @keyup.enter="handleLogin"
                  show-password
                />
              </el-form-item>
            </el-form>
          </div>
          <el-button class="login-button" type="primary" :loading="loginLoading" @click="handleLogin">登 陆</el-button>
        </div>
      </div>
      <div class="copyright">{{ copyright }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { LoginAccountData } from '@/api/login/login'
import { ElForm, ElMessage } from 'element-plus'
import { md5Object } from '@/utils/crypt'

export default defineComponent({
  name: 'Login',
  setup() {
    const store = useStore()
    const router = useRouter()

    const accountFormRef = ref<InstanceType<typeof ElForm>>()
    const accountForm = ref<LoginAccountData>({ username: '', password: '' })
    const encryptedAccount = computed<LoginAccountData>(() => md5Object({ ...accountForm.value }, 'password'))
    const accountRules = {
      username: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/, message: '手机号格式有误', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 5, max: 16, message: '密码必须为 5-16 位', trigger: 'blur' }
      ]
    }

    const title = '欢迎使用 XXX 管理系统'
    const copyright = 'Copyright © ' + new Date().getFullYear() + ' XXXXXX 版权所有'
    const loginLoading = ref(false)

    const handleLogin = () => {
      accountFormRef.value?.validate((isValid) => {
        if (isValid) {
          const timeout = 300
          loginLoading.value = true
          store
            .dispatch('login/accountLogin', encryptedAccount.value)
            .then((res) => {
              // 登录成功
              ElMessage.success('登录成功')
              setTimeout(() => {
                router.replace(res)
              }, timeout)
            })
            .catch((error) => {
              // 登录失败
              setTimeout(() => {
                ElMessage.error(error)
              }, timeout)
            })
            .finally(() => {
              // 关闭 loading
              setTimeout(() => {
                loginLoading.value = false
              }, timeout)
            })
        }
      })
    }

    return { accountFormRef, accountForm, accountRules, title, copyright, loginLoading, handleLogin }
  }
})
</script>

<style lang="less" scoped>
.app-login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('~@/assets/img/login-bg.jpg') no-repeat center / cover fixed;

  .login-container {
    display: flex;
    flex-direction: column;
    width: 960px;

    .login {
      display: flex;
      width: 100%;

      .login-title {
        flex-grow: 1;
        flex-shrink: 0;
        padding: 10px;
        box-sizing: border-box;
        font-size: 30px;
        color: var(--app-color-white);
        overflow: hidden;
      }

      .login-panel {
        width: 360px;
        padding: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(192, 192, 192, 0.8);
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.35);

        .login-logo {
          display: block;
          width: 100px;
          height: 100px;
          margin: -40px auto -20px;
          transform: translateY(-50%);
          border: 3px solid rgba(192, 192, 192, 0.8);
          border-radius: 50%;
          background-color: var(--app-color-white);
          box-shadow: 0 0 20px rgba(88, 88, 88, 0.55);
        }

        .login-button {
          width: 100%;
        }
      }
    }
  }

  .copyright {
    width: 100%;
    margin-top: 20px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    color: var(--app-color-white);
    border-top: 1px solid var(--app-color-white);
  }
}
</style>
